<%@ include file="inc/header.jspf" %>

<script type="text/javascript">
	function addTag(tag) {
		var currentVal = $('input[name="tags"]').val();
		var addedVal = "";

		if (currentVal)
			addedVal += "," + tag;
		else
			addedVal += tag;
		
		$("input[name='tags']").val(currentVal + addedVal);
	}
	
	function resetTags() {
		$('input[name="tags"]').val('');
	}
</script>

<form:form modelAttribute="post" method="post">
 	<fieldset>
		<form:errors path="*" class="errors"/>
	</fieldset>
	<fieldset>
	 	<ul data-role="listview" data-inset="true">
			<li data-role="fieldcontain">
				<form:label path="category.categoryID"><fmt:message key="category"/></form:label>
				<form:select path="category.categoryID" data-inline="true">
					<form:option value=""></form:option>
					<form:options items="${categoryList}" itemValue="categoryID" itemLabel="name" />
				</form:select>
			</li>
			<li data-role="fieldcontain">
				<form:label path="title"><fmt:message key="title"/></form:label>
				<form:input path="title"/>
			</li>
			<li data-role="fieldcontain">
				<form:label path="content"><fmt:message key="content"/></form:label>
				<form:textarea path="content"/>
			</li>
			<li data-role="fieldcontain">
				<form:label path="tags"><fmt:message key="tag"/><a href="#popupTag" data-role="button" data-inline="true" data-rel="popup" data-icon="search" data-iconpos="notext">Search</a></form:label>
				<form:input path="tags" readonly="true"/>
			</li>
		</ul>
	</fieldset>
	<div data-role="fieldcontain">
			<button type="button" data-mini="true" data-inline="true"><fmt:message key="tag"/></button>
			<button type="button" data-mini="true" data-inline="true"><fmt:message key="file"/></button>
		</div>	
	<fieldset style="text-align: right;">
			<button type="submit" data-theme="b" data-inline="true" data-icon="forward"><fmt:message key="save"/></button>
			<button type="button" data-theme="b" data-inline="true" data-icon="back" onclick="history.go(-1);"><fmt:message key="cancel"/></button>
		</fieldset>
</form:form>

<div data-role="popup" id="popupTag">
	<ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search tags..." data-filter-theme="d">
	<c:forEach var="tag" items="${tagList}">
		<li><a href="javascript:addTag('${tag.tagID}');">${tag.tagID}</a></li>
	</c:forEach>
	</ul>
</div>

<%@ include file="inc/footer.jspf" %>
